<template>

  <div class="relation">
      <div class="search">
        <el-input v-model="username" placeholder="请输入账号"></el-input>
        <el-input v-model="realname" placeholder="请输入真实姓名"></el-input>
        <el-button type="primary" @click="find()">搜索</el-button>
        <el-button type="primary" @click="reset()">重置</el-button>
        <el-button type="primary" @click="add()">添加</el-button>
    </div>
    <div class="nums">
      <div class="recommend">
        <p>
          当前推荐客户数：
          <em>0</em> 人
        </p>
      </div>
      <div class="buy">
        <p>
          当前已购买人数：
          <em>0</em> 人
        </p>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="companyName" label="公司" width="80"></el-table-column>
        <el-table-column prop="realname" label="真实姓名" width="80"></el-table-column>
        <el-table-column prop="username" label="账户名称/手机号" width="200"></el-table-column>
        <el-table-column prop="status" label="是否锁定" width="80">
          <template #default="scope">
            <span v-if="scope.row.status == 1">未锁定</span>
            <span v-if="scope.row.status == 2">锁定</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="bz" label="备注"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button type="primary" @click="handleClick(scope)">编辑</el-button>
            <el-button type="primary"  @click="lock(scope)" v-if="scope.row.status == '1'">锁定</el-button>
            <el-button type="danger" @click="lock(scope)" v-if="scope.row.status == '2'">解锁</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加框 -->
      <el-dialog title="添加" :visible.sync="addShow">
      <el-form
        ref="dataAddForm"
        :model="form"
        label-width="80px">
       <el-form-item label="公司名称">
            <el-input v-model="form.companyName" placeholder="请输入公司名称"></el-input>
          </el-form-item>
          <el-form-item label="个人姓名">
            <el-input v-model="form.realname" placeholder="请输入个人姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input  v-model="form.pass" placeholder="请输入密码" autocomplete="off" show-password></el-input>
          </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addShow = false">取 消</el-button>
          <el-button type="primary" @click="addSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑框 -->
    <el-dialog title="编辑" :visible.sync="editShow">
      <el-form
        ref="dataAddForm"
        :model="form"
        label-width="80px">
       <el-form-item label="公司名称">
            <el-input v-model="form.companyName" placeholder="请输入公司名称"></el-input>
          </el-form-item>
          <el-form-item label="个人姓名">
            <el-input v-model="form.realname" placeholder="请输入个人姓名"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input  v-model="form.pass" placeholder="请输入密码" autocomplete="off" show-password></el-input>
          </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editShow = false">取 消</el-button>
          <el-button type="primary" @click="editSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="pageIndex"
        :page-sizes="pageTotal"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div> -->
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "customerList",
  data() {
    return {
      type: "",
      date: "",
      username:null,
      realname:null,
      addShow:false,//添加框展示属性
      editShow:false,//编辑框展示属性
      tableData: [
      ],
      total:'',
      pageTotal: 0, //总共有多少数据
      pageIndex: 1, //当前在第几页
      form:{
        companyName:'',
        realname:'',
        mobile:'',//username
        pass:'',
        id:'',
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
      //展示
     getList(){
        let params = {
          username:this.username,
          realname:this.realname
        }
        axios
        .post("http://47.108.58.38/tk/user/list",params)
        .then(res =>{
          this.tableData = res.data.data
        })
    },
    //搜索
    find(){
        let params = {
          username:this.username,
          realname:this.realname
        }
        axios
        .post("http://47.108.58.38/tk/user/list",params)
        .then(res =>{
          this.tableData = res.data.data
        })
    },
    //重置清空
    reset(){
        this.username = null,
        this.realname = null,
        this.getList()
    },
    //添加按钮
    add(){
        this.addShow = true;
        // console.log(this.addShow)
    },
    //添加框确定按钮
    addSubmit(){
        let params ={
        companyName:this.form.companyName,
        realname:this.form.realname,
        username:this.form.mobile,
        password:this.form.pass
        }
        axios.post("http://47.108.58.38/tk/user/add",params)
        .then(res =>{
            console.log("请求成功!")
            this.$message.success(res.data.message)
            this.getList()
            this.addShow = false
        })
        .catch(err =>{
            this.$message.error(err.data.message)
            this.addShow = false
        })
    },
    //编辑按钮
    handleClick(row){
        this.editShow = true
        console.log()
        this.form.companyName = row.row.companyName
        this.form.realname = row.row.realname
        this.form.mobile = row.row.username
        // this.form.pass = row.row.password
        this.form.id = row.row.id

        console.log(row.row.realname)
    },

    //编辑确定按钮
    editSubmit(){
        let params = {
            id:this.form.id,
            companyName:this.form.companyName,
            realname:this.form.realname,
            username:this.form.mobile,
            password:this.form.pass,
        }
        axios
        .post("http://47.108.58.38/tk/user/update",params)
        .then(res =>{
            this.editShow = false
            if(res.data.statusCode == "00000"){
                this.$message.success(res.data.message)
            }else{
                this.$message.error(res.data.message)
            }
            this.getList()
        })
        .catch(err =>{
            this.$message.error(err.data.message)
        })
    },
    //锁定、解锁按钮
    lock(row){
        let status = ""
      if(row.row.status == 1){
        status = 2
      }else if(row.row.status == 2){
        status = 1
      }
      let params = {
        id: row.row.id,
        status:status
      };

      this.$confirm('请确定是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {

      axios
        .post("http://47.108.58.38/tk/user/update", params)
        .then((res) => {
          console.log(res)
          if(res.data.statusCode == '00000'){
            this.$message.success(res.data.message)
            this.getList()
          }
        })
        .catch((err) => {
          console.log(err);
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
    }
  }
};
</script>

<style scoped lang="less">
.relation {
  width: 100%;
  .tips {
    border: 1px solid rgb(0, 193, 222);
    font-size: 14px;
    padding: 5px 20px;
    color: rgb(119, 127, 132);
    background-color: rgb(239, 240, 252);
    i {
      margin-right: 5px;
    }
  }
  .search {
      display:inline-flex;
  }
  /deep/.el-input__inner{
      width: 80%;
  }
  .nums {
    width: 100%;
    padding: 5px 20px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: 20px;
    height: 50px;
    border-bottom: none;
    p {
      font-size: 14px;
      color: rgb(119, 127, 132);
      em {
        // font-size: 20px;
        font-weight: 600;
      }
    }
    .buy {
      margin-left: 50px;
    }
  }
  .table {
    width: 100%;
    /deep/ .el-table{
      border: 1px solid #ccc;
      /deep/ .has-gutter tr th{
        // background: #f00;
        background: rgb(245,245,246) !important;
      }
    }
  }
  .pagination{
    width: 100%;
    height: 60px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing:border-box;
    border-top: none;
  }
}
</style>
